<template>
  <div>
    <!-- 收货地址 -->
    <!-- 地址详细信息的展示 -->
    <div class="cart-top" v-if="address">
      <div class="receive">
        <div class="name">收货人：{{ address.userName }}</div>
        <div class="phone-number">{{ address.telNumber }}</div>
      </div>
      <div class="address">收货地址：{{ allAddress }}</div>
      <!-- <img
        src="../../../static/images/cart_border@2x.png"
        alt=""
        class="address-bar"
        mode="aspectFill"
      /> -->
      <image
        src="/static/images/cart_border@2x.png"
        alt=""
        class="address-bar"
        mode="aspectFill"
      />
    </div>
    <!-- 新增收货人信息 -->
    <div class="add_addresss" @click="getAddress" v-else>
      <text>新增收货人</text>
      <span></span>
    </div>
    <!-- 商品列表展示 -->
    <div class="list-title">优购生活馆</div>
    <div class="ware-list">
      <div class="ware-item" v-for="(value, name, index) in cart" :key="index">
        <!-- 左侧按钮checkbox -->
        <div class="choice-button">
          <icon
            @click="singleCheck(value.goods_id)"
            type="success"
            size="14"
            :color="value.checked ? 'red' : '#eee'"
          />
        </div>
        <!-- 右侧商品信息 -->
        <div class="ware-content">
          <!-- 左侧图片 -->
          <navigator class="ware-image">
            <img mode="aspectFill" :src="value.goods_small_logo" />
          </navigator>
          <!-- 右侧商品信息 -->
          <div class="ware-info">
            <!-- 商品名称 -->
            <navigator class="ware-title">
              {{ value.goods_name }}
            </navigator>
            <!-- 商品价格和数量变更 -->
            <div class="ware-info-btm">
              <!-- 商品价格 -->
              <div class="ware-price">
                <span>￥</span>
                {{ value.goods_price }}
              </div>
              <!-- 数量变更 -->
              <div class="calculate">
                <div class="rect" @click="subNum(value.goods_id)">-</div>
                <div class="number">{{ value.num }}</div>
                <div class="rect" @click="addNum(value.goods_id)">+</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部菜单布局 -->
    <div class="cart-total">
      <!-- 左侧CheckBox -->
      <div class="total-button">
        <icon
          @click="allCheck()"
          type="success"
          size="14"
          :color="isAll ? 'red' : '#eee'"
        />全选
      </div>
      <!-- 中间的价格 -->
      <div class="total-center">
        <div class="total-price">
          合计：
          <text class="colorRed"> <text>￥</text>{{ allPrice }} </text>
        </div>
        <div class="price-tips">包含运费</div>
      </div>
      <!-- 右侧结算按钮 -->
      <div @click="toPay" class="accounts">结算</div>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      address: null,
      // 模板中用到的数据必须提前在data中定义，提前定义的数据才是响应式的（数据变化，页面自动变化）
      //如果数据是后来添加的，那么这样的数据不具备响应式的能力
      cart: {},
    };
  },
  computed: {
    allPrice() {
      // 计算购物车所有商品的总价格
      // 单价 X 数量 再进行累加
      let sum = 0;
      for (let key in this.cart) {
        let p = this.cart[key];
        if (p.checked) {
          // 选中的商品
          // 单价 X 数量 再进行累加
          sum += p.goods_price * p.num;
        }
      }
      return sum;
    },
    isAll() {
      //控制全选按钮的颜色，所有的商品都选中，那么全选按钮都变红
      //只要有一个没有选中，那么全选按钮就是灰色
      let flag = true;
      /*
      以下是购物车的格式
      this.cart={
        1233:{
          goods_price:100,
          num:1
          checked:false
        },
        3455:{
          goods_price:100,
          num:1
          checked:false
        }
      }
     */
      for (let key in this.cart) {
        let p = this.cart[key];
        if (p.checked == false) {
          flag = false;
          break;
        }
      }
      return flag;
    },
    allAddress() {
      // 生成完整的地址信息
      if (this.address === null) {
        return "";
      }
      let { provinceName, cityName, countyName, detailInfo } = this.address;
      return `${provinceName}${cityName}${countyName}${detailInfo}`;
    },
  },
  methods: {
    produceGoodInfo() {
      // 生成订单参数：商品列表
      let products = [];
      for (let key in this.cart) {
        // 其中一项商品
        let p = this.cart[key];
        let obj = {
          goods_id: p.goods_id,
          goods_number: p.num,
          goods_price: p.goods_price,
        };
        products.push(obj);
      }
      return products;
    },
    toPay() {
      // 结算之前必须先选中商品
      // 如何判断是否选中商品？如果总价是0，证明没有选中商品
      if (this.allPrice == 0) {
        // 没有选中商品，不允许继续执行，给个友好提示
        mpvue.showToast({
          title: "请选择商品",
          icon: "error",
          // duration: 2000,
        });
        return;
      }
      // 支付之前必须先进行登录
      // 如果已经登录成功了，那么在客户端是会存储token的
      let token = mpvue.getStorageSync("mytoken");
      console.log(token);
      if (!token) {
        console.log("2");
        // 没有token,需要用户登录，跳转到登录页面
        mpvue.navigateTo({
          url: "/pages/auth/main",
        });
      }
      // 获取到token后
      // 生成订单，需要调用后台接口
      // 准备相关参数
      let param = {
        order_price: this.allPrice,
        consignee_addr: this.allAddress,
        goods: this.produceGoodInfo(),
      };
      request("my/orders/create", param, "post", {
        Authorization: token,
      }).then((res) => {
        // 生成订单之后，服务器会返回一个订单号，需要传递到订单页面
        let order_number = res.data.message.order_number;
        mpvue.navigateTo({
          url: "/pages/order/main?order_num=" + order_number,
        });
      });
    },
    subNum(gid) {
      // 控制商品数量减一
      // 方法一：
      // var c = JSON.parse(JSON.stringify(this.cart));
      // c[gid].num = c[gid].num - 1;
      // if (c[gid].num < 0 || c[gid].num == 0) {
      //   delete c[gid];
      // }
      // this.cart = c;
      // 方法二：
      var c = JSON.parse(JSON.stringify(this.cart));
      if (c[gid].num > 1) {
        c[gid].num--;
      } else {
        delete c[gid];
      }
      this.cart = c;
      // 方法三（复制一个对象的方式）
      // var c = JSON.parse(JSON.stringify(this.cart));
      // if (c[gid].num > 1) {
      //   c[gid].num -= 1;
      //   this.cart = c;
      // } else {
      //   let obj = {};
      //   for (let key in c) {
      //     if (c[key].goods_id != gid) {
      //       obj[key] = c[key];
      //     }
      //   }
      //   this.cart = obj;
      // }
    },
    addNum(gid) {
      // 控制单件商品数量加一
      // 获取点击商品的ID，根据id修改对应商品的num数量
      var c = JSON.parse(JSON.stringify(this.cart));
      c[gid].num = c[gid].num + 1;
      this.cart = c;
    },
    allCheck() {
      // 控制全选或反选
      // 全选按钮的当前状态
      let flag = this.isAll;
      // 控制所有商品的checked属性的变化
      // 先复制一份原有的购物车数据
      var c = JSON.parse(JSON.stringify(this.cart));
      for (let key in c) {
        // 其中一件商品
        let p = c[key];
        p.checked = !flag;
      }
      // 覆盖默认数据
      this.cart = c;
    },
    singleCheck(gid) {
      // 控制单件商品的选中与否

      // 直接通过对象的引用修改里面的属性值不可以（原因是gid是后加的，不具备响应式能力）
      // this.cart[gid].checked = !this.cart[gid].checked;
      // console.log(!this.cart[gid].checked);

      // 把原有的对象复制一份，然后修改数据，重新赋值给原有的data
      let c = JSON.parse(JSON.stringify(this.cart));
      this.cart = c;
      this.cart[gid].checked = !this.cart[gid].checked;
    },
    getAddress() {
      let that = this;
      // 获取微信中的收货地址
      mpvue.chooseAddress({
        success(res) {
          // console.log(res);
          that.address = res;
          // 把地址存储在本地缓存中
          mpvue.setStorageSync("myaddress", res);
        },
      });
    },
  },
  onShow() {
    // 初始化购物车数据(每次页面显示，都要重新加载缓存数据)
    this.cart = mpvue.getStorageSync("mycart");
    // console.log(this.cart);
  },
  onHide() {
    // 页面隐藏时触发
    // 把购物车的最新数据重新写回到缓存
    mpvue.setStorageSync("mycart", this.cart);
  },
};
</script>

<style scoped lang="less">
@import "./main.less";
</style>
